<template>
	<div class="list">
		<div v-for="(item, index) in list" :key="index" class="list__item" :class="{ active: item.id === selectId }" @click="selectValue(item.id)">
			<div class="left">
				<img class="avatar !rounded-[50%] w-[42px] h-[42px]" :alt="item.user.name" :src="item.user.img" />
			</div>
			<div class="right flex flex-col flex-1 ml-[12px] overflow-hidden">
				<div class="flex items-center justify-between !w-full mb-[9px]">
					<span class="name">{{ item.user.name }}</span>
					<span class="time">{{ item.messages[item.messages.length - 1].date | time }}</span>
				</div>
				<div class="flex items-center">
					<span v-if="item.unreadMessage > 0" class="text-[12px] text-[#1A2483] mr-[4px]">[未读]</span>
					<div v-if="item.msgType === 0" class="msg truncate flex-1">
						{{ item.messages[item.messages.length - 1].content }}
					</div>
					<div v-if="item.msgType === 1" class="msg truncate flex-1">图片</div>
					<div v-if="item.msgType === 2" class="msg truncate flex-1">语音</div>
					<div v-if="item.msgType === 3" class="msg truncate flex-1">视频</div>
					<div v-if="item.msgType === 4" class="msg truncate flex-1" :style="{ width: 'calc(100% - 12px)' }">
						{{ url + item.content.goodsId }}
					</div>
					<span v-if="item.unreadMessage" class="tag ml-[18px]">{{ item.unreadMessage }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import dayjs from 'dayjs';
import isToday from 'dayjs/plugin/isToday';
import isYesterday from 'dayjs/plugin/isYesterday';
dayjs.extend(isToday);
dayjs.extend(isYesterday);
function isCurrentWeek(past) {
	const pastTime = new Date(past).getTime();
	const today = new Date(new Date().toLocaleDateString());
	let day = today.getDay();
	day = day === 0 ? 7 : day;
	const oneDayTime = 60 * 60 * 24 * 1000;
	const monday = new Date(today.getTime() - oneDayTime * (day - 1));
	const nextMonday = new Date(today.getTime() + oneDayTime * (8 - day));
	return monday.getTime() <= pastTime && nextMonday.getTime() > pastTime;
}
export default {
	filters: {
		time(date) {
			//是不是昨天
			if (dayjs(date).format('YYYY-MM:DD') === dayjs().subtract(1, 'day').format('YYYY-MM:DD')) {
				return dayjs(date).format('昨天 HH:mm');
			}
			//是不是今天
			if (dayjs(date).format('YYYY-MM-DD') === dayjs().format('YYYY-MM-DD')) {
				return dayjs(date).format('HH:mm');
			}
			//是不是本周
			if (isCurrentWeek(date)) {
				const text = {
					0: '天',
					1: '一',
					2: '二',
					3: '三',
					4: '四',
					5: '五',
					6: '六',
				}[dayjs(date).day()];
				return dayjs(date).format(`星期${text} HH:mm`);
			}
			//默认日期
			return dayjs(date).format(`YYYY-MM-DD HH:mm`);
		},
	},
	data() {
		return {
			interval: null,
			url: process.env.VUE_APP_CHAT_GOODS_DETAIL_URL,
		};
	},
	computed: {
		...mapGetters(['searchedChatlist', 'selectId']),
		list() {
			return this.searchedChatlist.map((item) => {
				if (item.msgType === 4 && typeof item.content === 'string') {
					item.content = JSON.parse(item.content);
				}
				return item;
			});
		},
	},
	methods: {
		...mapActions({
			getChatlist: 'chat/getChatlist',
			selectSession: 'chat/selectSession',
		}),
		selectValue(id) {
			this.$emit('selectSession', id);
			this.selectSession(id);
		},
	},
};
</script>

<style lang="scss" scoped>
.list {
	height: 580px;
	overflow-y: auto;
	&::-webkit-scrollbar {
		display: none;
	}
	&__item {
		display: flex;
		padding: 12px;
		transition: background-color 0.1s;
		position: relative;
		border-bottom: 1px solid #f2f2f2;
		cursor: pointer;
		overflow: hidden;
		&:hover {
			background-color: #f5f7fb;
		}
		.avatar {
			border-radius: 2px;
			width: 42px;
			height: 42px;
		}
		.right {
			position: relative;
			width: calc(100% - 46.5px);
		}
		.name {
			color: #333333;
			font-size: 14px;
		}
		.time {
			color: #999;
			font-size: 12px;
			width: 100px;
			text-align: right;
		}
		.msg {
			font-size: 12px;
			color: #808a97;
		}
	}
	.active {
		background-color: #f5f7fb;
	}
	.tag {
		border-radius: 50%;
		color: #ffffff;
		width: 18px;
		height: 18px;
		font-size: 12px;
		text-align: center;
		background: #f14a46;
	}
}
</style>
